<template>
  <div class="box-shadow">
    <div class="box-details">
      <div class="text">{{ $t("基本信息") }}</div>
      <div class="text-border"></div>
    </div>
    <div class="details-title">
      <div class="title-time">
        <div class="timeName">
          <div class="label">
            {{ $t("触发时间") + "：" }}
          </div>
          <div class="value">{{ triggerTimes }}</div>
        </div>
        <div class="timeName">
          <div class="label">{{ $t("开始时间") + "：" }}</div>
          <div class="value">{{ beginTimes }}</div>
        </div>
        <div class="timeName">
          <div class="label">{{ $t("结束时间") + "：" }}</div>
          <div class="value">{{ endTimes }}</div>
        </div>
      </div>
      <div class="title-time">
        <div class="timeName">
          <div class="label">{{ $t("触发电量") + "：" }}</div>
          <div class="value">{{ triggerPowers }}%</div>
        </div>
        <div class="timeName">
          <div class="label">{{ $t("开始电量") + "：" }}</div>
          <div class="value">{{ beginPowers }}%</div>
        </div>
        <div class="timeName">
          <div class="label">{{ $t("结束电量") + "：" }}</div>
          <div class="value">
            {{ endPowers == null ? $t("暂无") : endPowers + "%" }}
          </div>
        </div>
      </div>
      <div class="title-time">
        <div class="timeName">
          <div class="label">{{ $t("充电类型") + "：" }}</div>
          <div class="value">
            {{
              chargeTypes == 0
                ? $t("手动充电")
                : chargeTypes == 1
                ? $t("低电量充电")
                : $t("巡检充电")
            }}
          </div>
        </div>
        <div class="timeName">
          <div class="label">{{ $t("充电人") + "：" }}</div>
          <div class="value">{{ charger }}</div>
        </div>
        <div class="timeName">
          <div class="label">{{ $t("充电时长") + "：" }}</div>
          <div class="value">{{ chargeTimes }}min</div>
        </div>
      </div>
      <div class="title-time">
        <div class="timeName">
          <div class="label">{{ $t("充电状态2") + "：" }}</div>
          <div
            class="value"
            :style="{
              color:
                operationTypes == 0
                  ? '#73F6AF'
                  : operationTypes == 1
                  ? '#FF5562 '
                  : '',
            }"
          >
            {{
              operationTypes == 0
                ? $t("成功")
                : operationTypes == 1
                ? $t("失败")
                : ""
            }}
          </div>
        </div>
        <div class="theLast">
          <div class="label label_text">{{ $t("充电概述") + "：" }}</div>
          <div class="value">{{ operationContents }}</div>
        </div>
      </div>
    </div>
    <div class="box-details">
      <div class="text">{{ $t("详情日志") }}</div>
      <div class="text-border"></div>
    </div>
    <div class="box-ul">
      <ul>
        <li v-for="item in detailLists" :key="item.id">
          <span class="ul-time">{{ item.recordTime }}：</span>
          <span class="ul-text">{{ item.content }}</span>
        </li>
      </ul>
    </div>
    <div class="box-details">
      <div class="text">{{ $t("参数曲线") }}</div>
      <div class="text-border"></div>
    </div>
    <!-- 图表 -->
    <div class="chartBox">
      <div class="chartShadow electricity" ref="electricityChart">
        <div class="header">
          <div class="title">{{ $t("电量") }}</div>
          <div class="selectGroup">
            <img
              @click="download('电量')"
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('electricity')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <div id="powerEharts" style="width: 100%; height: 100%"></div>
      </div>
      <div class="chartShadow walktemp" ref="electricCurrent">
        <div class="header">
          <div class="title">{{ $t("电流") }}</div>
          <div class="selectGroup">
            <img
              @click="download('电流')"
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('electricCurrent')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <div id="electricCurrent" style="width: 100%; height: 100%"></div>
      </div>
      <div class="chartShadow walktemp" ref="walktempChart">
        <div class="header">
          <div class="title">{{ $t("电压") }}</div>
          <div class="selectGroup">
            <img
              @click="download('电压')"
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('voltage')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <div id="voltageEcharts" style="width: 100%; height: 100%"></div>
      </div>
      <div class="chartShadow speed" ref="speedChart">
        <div class="header">
          <div class="title">{{ $t("温度") }}</div>
          <div class="selectGroup">
            <img
              @click="download('温度')"
              class="chat"
              src="../../../assets/images/topRight.png"
              alt=""
            />
            <img
              @click="fullScreen('temperature')"
              class="chat"
              src="../../../assets/images/screen.png"
              alt=""
            />
          </div>
        </div>
        <div id="temperatureEcharts" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { API_getdetail, API_getDetailChart } from "@/api/log/cherglog";
import screenfull from "screenfull";
export default {
  data() {
    return {
      beginTimes: [],
      triggerTimes: [],
      triggerPowers: [],
      beginPowers: [],
      endPowers: [],
      chargeTypes: [],
      charger: [],
      chargeTimes: [],
      operationTypes: [],
      operationContents: [],
      detailLists: [],
      startTimes: [],
      endTimes: [],
      batteryVal: [], //电池
      currentVal: [], //电流
      voltageVal: [], //电压
      tempVal: [], // 温度
      times: [], // 折线图下边的时间
    };
  },
  created() {
    this.handelDetailLog();
  },
  methods: {
    // 获取详情日志
    handelDetailLog() {
      API_getdetail(this.$route.query).then((res) => {
        this.beginTimes = res.data.beginTime;
        this.endTimes = res.data.endTime;
        this.triggerTimes = res.data.triggerTime;
        this.triggerPowers = res.data.triggerPower;
        this.beginPowers = res.data.beginPower;
        this.endPowers = res.data.endPower;
        this.chargeTypes = res.data.chargeType;
        this.charger = res.data.charger;
        this.chargeTimes = res.data.chargeTime;
        this.operationTypes = res.data.operationType;
        this.operationContents = res.data.operationContent;
        this.detailLists = res.data.detailList;
        this.startTimes = res.data.detailList.map((item) => {
          return item.recordTime;
        });
        this.objBattery();
      });
    },
    // 初始化图表
    getEchartData(time) {
      // 电池 (demo)
      var powerEharts = this.$echarts.init(
        document.getElementById("powerEharts")
      );
      // 电流 (demo)
      var electricCurrent = this.$echarts.init(
        document.getElementById("electricCurrent")
      );
      // 电压 （demo）
      var voltageEcharts = this.$echarts.init(
        document.getElementById("voltageEcharts")
      );
      // 温度
      var temperatureEcharts = this.$echarts.init(
        document.getElementById("temperatureEcharts")
      );
      // 电池
      powerEharts.setOption({
        tooltip: {
          trigger: "axis",
        },
        backgroundColor: "#10202f", //背景色
        color: ["#00D1FF"],
        legend: {
          textStyle: {
            fontSize: 15,
          },
          bottom: "10",
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "45",
          top: "80",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: time,
          axisLine: {
            lineStyle: {
              color: "#314450",
              width: "2",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#BFCAD4",
              fontSize: "14",
            },
          },
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
        },
        yAxis: {
          type: "value",
          scale: true, //自适应
          nameGap: 15,
          axisTick: {
            show: false, //刻度线
          },
          axisLine: {
            show: false, //隐藏y轴
          },
          axisLabel: {
            textStyle: {
              color: "#BFCAD4",
              fontSize: "14",
            },
          },
          splitLine: {
            // ⽹格线
            show: true,
            lineStyle: {
              color: "#2e3f48",
              type: "dotted",
              width: "2",
            },
          },
        },
        dataZoom: {
          type: "slider",
          top: 10,
          textStyle: {
            color: "#A6ACB1", //滚动条两边字体样式
          },
        },
        series: [
          {
            data: this.batteryVal,
            type: "line",
          },
        ],
      });
      // 电流
      electricCurrent.setOption({
        tooltip: {
          trigger: "axis",
        },
        backgroundColor: "#10202f", //背景色
        color: ["#00D1FF"],
        legend: {
          textStyle: {
            fontSize: 15,
          },
          bottom: "10",
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "45",
          top: "80",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: time,
          axisLine: {
            lineStyle: {
              color: "#314450",
              width: "2",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#BFCAD4",
              fontSize: "14",
            },
          },
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
        },
        yAxis: {
          type: "value",
          scale: true, //自适应
          nameGap: 15,
          axisTick: {
            show: false, //刻度线
          },
          axisLine: {
            show: false, //隐藏y轴
          },
          axisLabel: {
            textStyle: {
              color: "#BFCAD4",
              fontSize: "14",
            },
          },
          splitLine: {
            // ⽹格线
            show: true,
            lineStyle: {
              color: "#2e3f48",
              type: "dotted",
              width: "2",
            },
          },
        },
        dataZoom: {
          type: "slider",
          show: false,
        },
        series: [
          {
            data: this.currentVal,
            type: "line",
          },
        ],
      });
      // 电压
      voltageEcharts.setOption({
        tooltip: {
          trigger: "axis",
        },
        backgroundColor: "#10202f", //背景色
        color: ["#00D1FF"],
        legend: {
          textStyle: {
            fontSize: 15,
          },
          bottom: "10",
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "45",
          top: "80",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: time,
          axisLine: {
            lineStyle: {
              color: "#314450",
              width: "2",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#BFCAD4",
              fontSize: "14",
            },
          },
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
        },
        yAxis: {
          type: "value",
          scale: true, //自适应
          nameGap: 15,
          axisTick: {
            show: false, //刻度线
          },
          axisLine: {
            show: false, //隐藏y轴
          },
          axisLabel: {
            textStyle: {
              color: "#BFCAD4",
              fontSize: "14",
            },
          },
          splitLine: {
            // ⽹格线
            show: true,
            lineStyle: {
              color: "#2e3f48",
              type: "dotted",
              width: "2",
            },
          },
        },
        dataZoom: {
          type: "slider",
          show: false,
        },
        series: [
          {
            data: this.voltageVal,
            type: "line",
          },
        ],
      });
      // 温度
      temperatureEcharts.setOption({
        tooltip: {
          trigger: "axis",
        },
        backgroundColor: "#10202f", //背景色
        color: ["#00D1FF"],
        legend: {
          textStyle: {
            fontSize: 15,
          },
          bottom: "10",
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "45",
          top: "80",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: time,
          axisLine: {
            lineStyle: {
              color: "#314450",
              width: "2",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#BFCAD4",
              fontSize: "14",
            },
          },
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
        },
        yAxis: {
          type: "value",
          scale: true, //自适应
          nameGap: 15,
          axisTick: {
            show: false, //刻度线
          },
          axisLine: {
            show: false, //隐藏y轴
          },
          axisLabel: {
            textStyle: {
              color: "#BFCAD4",
              fontSize: "14",
            },
          },
          splitLine: {
            // ⽹格线
            show: true,
            lineStyle: {
              color: "#2e3f48",
              type: "dotted",
              width: "2",
            },
          },
        },
        dataZoom: {
          type: "slider",
          show: false,
        },
        series: [
          {
            data: this.tempVal,
            type: "line",
          },
        ],
      });
      this.$echarts.connect([
        powerEharts,
        electricCurrent,
        voltageEcharts,
        temperatureEcharts,
      ]);
      // 当屏幕尺寸发生变化时，图表尺寸同时发生改变
      window.onresize = function () {
        powerEharts.resize();
        electricCurrent.resize();
        voltageEcharts.resize();
        temperatureEcharts.resize();
      };
    },
    // 获取电池数据
    objBattery() {
      let { id } = this.$route.query;
      API_getDetailChart({
        robotChargeId: id,
        startTime: this.startTimes[0],
      }).then((res) => {
        if (res.data) {
          this.batteryVal = res.data.quantity.split(",").map((item) => {
            return Number(item);
          });
          this.currentVal = res.data.current.split(",").map((item) => {
            return Number(item);
          });
          this.voltageVal = res.data.voltage.split(",").map((item) => {
            return Number(item);
          });
          this.tempVal = res.data.temp.split(",").map((item) => {
            return Number(item);
          });
          this.times = res.data.createTime.split(",");
          this.getEchartData(this.times);
        }
      });
    },
    // 图表全屏
    fullScreen(type) {
      if (!screenfull.isEnabled) {
        this.$message({ message: "你的浏览器不支持全屏", type: "warning" });
        return false;
      }
      switch (type) {
        case "electricity":
          screenfull.toggle(this.$refs.electricityChart);
          break;
        case "electricCurrent":
          screenfull.toggle(this.$refs.electricCurrent);
          break;
        case "voltage":
          screenfull.toggle(this.$refs.walktempChart);
          break;
        case "temperature":
          screenfull.toggle(this.$refs.speedChart);
          break;
      }
    },
    // echarts导出图片
    download(type) {
      if (type === "电量") {
        let mycanvas = document.getElementsByTagName("canvas")[0];
        let image = mycanvas.toDataURL("image/png");
        let $a = document.createElement("a");
        $a.setAttribute("href", image);
        $a.setAttribute(
          "download",
          `${this.$t("电量")}${this.$t("的图表")}.png`
        );
        $a.click();
      }
      if (type == "电流") {
        let mycanvas = document.getElementsByTagName("canvas")[1];
        let image = mycanvas.toDataURL("image/png");
        let $a = document.createElement("a");
        $a.setAttribute("href", image);
        $a.setAttribute(
          "download",
          `${this.$t("电流")}${this.$t("的图表")}.png`
        );
        $a.click();
      }
      if (type == "电压") {
        let mycanvas = document.getElementsByTagName("canvas")[2];
        let image = mycanvas.toDataURL("image/png");
        let $a = document.createElement("a");
        $a.setAttribute("href", image);
        $a.setAttribute(
          "download",
          `${this.$t("电压")}${this.$t("的图表")}.png`
        );
        $a.click();
      }
      if (type == "温度") {
        let mycanvas = document.getElementsByTagName("canvas")[3];
        let image = mycanvas.toDataURL("image/png");
        let $a = document.createElement("a");
        $a.setAttribute("href", image);
        $a.setAttribute(
          "download",
          `${this.$t("温度")}${this.$t("的图表")}.png`
        );
        $a.click();
      }
    },
  },
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.box-details {
  padding: 0 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    font-size: 16px;
    font-weight: bold;
    color: #00d1ff;
    padding: 24px 0 16px;
  }
  .text-border {
    flex: 1;
    border-bottom: 1px dashed rgba(219, 255, 251, 0.2);
    margin-top: 10px;
  }
}
.details-title {
  padding: 0 15px;
  display: flex;
}
.title-time {
  width: 25%;
  .timeName {
    display: flex;
    align-items: center;
    padding: 8px 0px 0;
    font-size: 14px;
    color: #bec2c6;

    .label {
      color: #a6acb1;
      opacity: 0.7;
    }
    .value {
      word-break: break-all;
      font-size: 12px;
      font-weight: bold;
      width: 70%;
      height: 100%;
    }
  }
  .theLast {
    display: flex;
    padding: 8px 0px 0;
    font-size: 14px;
    color: #bec2c6;

    .label {
      color: #a6acb1;
      opacity: 0.7;
    }
    .value {
      word-break: break-all;
      font-size: 12px;
      font-weight: bold;
      width: 80%;
      height: 100%;
    }
  }
}
.chartBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 23px 24px 0;
}
.chartShadow {
  width: 100%;
  height: 382px;
  background: rgba(255, 255, 255, 0.06);
}
.electricity,
.walktemp,
.speed {
  position: relative;
  .header {
    position: absolute;
    top: 32px;
    left: 0;
    width: 100%;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    z-index: 999;
    .title {
      font-size: 16px;
      font-weight: bold;
      color: #00d1ff;
      display: flex;
      align-items: center;
    }
    .selectGroup {
      .chat {
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-left: 16px;
      }
    }
  }
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 146px;
}
::v-deep .el-range-input {
  background: none !important;
}
.box-ul {
  ul {
    height: 200px;
    overflow-x: auto;
    white-space: nowrap;
    li {
      font-size: 14px;
      color: #a6acb1;
      opacity: 0.7;
    }
  }
}
::v-deep {
  input {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border: none !important;
  }
}
::v-deep .el-range-separator {
  color: #fff;
}
</style>
